{% extends 'ApplicationBootstrapBundle::layout.html.twig' %}

{% block title %}Sticky Footer and Fixed Top Navbar Example for Bootstrap{% endblock %}

{% block layoutstyle %}
    <link href="{{ asset('bundles/applicationbootstrap/css/examples/navbar_fixed_sticky_footer.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block stylesheets %}
{% endblock %}

{% block javascripts %}
	<script src="{{ asset('bundles/applicationbootstrap/js/maps/google-maps/mapsSattelite.js') }}" type="text/javascript"></script>

	<script type="text/javascript">
		// Load OpenLayers library and create map
		function OpenLayersMap(){
			LoadOpenLayersScript(LoadTestMap);
		}
		$(document).ready(function() {
			// Load Google Map API and load OpenLayers in callback
			$.getScript('http://maps.google.com/maps/api/js?sensor=false&callback=OpenLayersMap');
			// Add Drag-n-Drop feature
			WinMove();
		});
	</script>
	
{% endblock %}

{% block navigation %}
    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
        
            {% include 'ApplicationBootstrapBundle::_navbar.html.twig' %}
        
        </div>
    </nav>
{% endblock %}

{% block body %}
    <div id="content" class="container">
        <div class="page-header">
          <h1>Google Maps Sattelite <small><label class="label label-danger">difficult</label></small></h1>
        </div>
		<div class="row">
			<div class="col-lg-6">
				<h3>3-in-1 map</h3>
				<div class="box">
					<div id="map-1" class="box-content olMap" style="height: 300px;"></div>
				</div>
			</div>
			<div class="col-lg-6">
				<h3>OpenStreetMap</h3>
				<div class="box">
					<div id="map-2" class="box-content olMap" style="height: 300px;"></div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-lg-12">
				<h3>Google sattelite</h3>
				<div class="box">
					<div id="map-3" class="box-content olMap" style="height: 400px;"></div>
				</div>
			</div>
		</div>
    </div> <!-- /container -->
{% endblock %}